<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>填写回款说明</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        model-picker-input {
            opacity: 0 !important;
            top: -9999px;
            left: -9999px;
            position: absolute;
        }

        .model-picker-span {
            position: relative;
            display: block;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            color: #ccc;
            cursor: pointer;
        }

        .model-picker-span > .placeholder {
            color: #aaa;
        }

        .model-picker-span > .arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 10px;
            margin-top: -3px;
            height: 5px;
            background: url(../images/drop-arrow.png) -10px -25px no-repeat;
        }

        .model-picker-span.focus,
        .model-picker-span.open {
            border-bottom-color: #46A4FF;
        }

        .model-picker-span.open > .arrow {
            background-position: -10px -10px;
        }

        .model-picker-span > .title > span {
            color: #333;
            padding: 5px;
            border-radius: 3px;
        }

        .model-picker-span > .title > span:hover {
            background-color: #f1f8ff;
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select-wrap {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .model-select-tab {
            border-bottom: 1px solid #ccc;
            background: #f5f5f5;
            font-size: 13px;
        }

        .model-select-tab > a {
            display: inline-block;
            padding: 4px 20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            color: #4D4D4D;
            text-align: center;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: -1px;
        }

        .model-select-tab > a.active {
            background: #fff;
            border-bottom: 1px solid #fff;
            color: #46A4FF;
        }

        .model-select-tab > a:first-child {
            border-left: none;
        }

        .model-select-tab > a:last-child.active {
            border-right: 1px solid #ccc;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select dt {
            position: absolute;
            width: 2.5em;
            font-weight: 500;
            text-align: right;
            line-height: 2;
        }

        .model-select dd {
            margin-left: 0;
            line-height: 2;
        }

        .model-select.province dd {
            margin-left: 3em;
        }

        .model-select a {
            display: inline-block;
            padding: 0 10px;
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
            margin-right: 2px;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .table-detail input[type=text] {
            padding-left: 0 !important;
            text-indent: 0 !important;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        .table-detail td {
            font-size: 16px;
            line-height: 39px;
            height: 39px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            background: #Fff;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            text-align: left !important;
            padding-left: 6px !important;
            font-size: 14px !important;
        }

        .table-detail td.td-value select {
            margin-left: -5px !important;
            padding-left: 0px !important;
            color: #2a8cec !important;

        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            font-size: 16px;
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 0px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 3;*/
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .td-module td {
            color: black;
            font-weight: bold;
        }

        .table-detail {
            border-left: 1px solid #cbcbcb;
            border-top: 1px solid #cbcbcb;
        }

        .table-detail .td-module {
            background-color: yellow;
        }

        .wyui-autocomplete-panel li a {
            font-size: 12px;
        }

        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .jiaobiao, .jiaobiaoNew {
            position: relative;
        }

        .jiaobiao i {
            display: block;
            width: 0;
            height: 0;
            border-width: 0px 0 12px 12px;
            border-style: solid;
            border-color: transparent transparent transparent #2a8cec;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .biTian {
            position: absolute;
            left: 2px;
            top: 10px;
            color: #000;
        }

        .vEdit {
            width: 100%;
            height: 100%;
            word-break: break-all;
            outline: none;
            user-select: text;
            white-space: pre-wrap;
            text-align: left;
            color:#2a8cec !important;
            font-size: 14px;
        }
        .td-row3 .vEdit span{
            color:#2a8cec !important;
            font-size: 12px;
            float:left;
        }
        .vEdit[contenteditable=true] {
            user-modify: read-write-plaintext-only;
        }
        .vEdit:empty:before {
            content: attr(placeholder);
            display: block;
            color: #ccc;
        }
        .vEdit{
            height: 100%;
            padding: 5px 0;
        }
    </style>
</head>
<body>
<div id="app" style="text-align:center;">
    <table class="table-detail" style="width: 100%">
        <tr class="td-module">
            <td colspan="4">回款说明</td>
        </tr>
        <tr>
            <td class="td-title" style="width: 40%; "><i class="biTian">*</i>实际回款金额</td>
            <td class="td-value" style="width:60%;">
                <input type="text"  v-model="returnMoney.actualReturnMoney"/>
            </td>
        </tr>
        <tr>
            <td class="td-title" style="width: 40%; "><i class="biTian">*</i>收款人</td>
            <td class="td-value" style="width:60%;">
                <input type="text"  v-model="returnMoney.returnPayee"/>
            </td>
        </tr>
        <tr>
            <td class="td-title" style="width: 40%; "><i class="biTian">*</i>是否已结清</td>
            <td class="td-value" style="width:60%;">
                <select id="chance" v-model="returnMoney.haveReturnClear"
                        style=" background-color: white;width:100%;color: rgb(22, 155, 213);border-style:none;">
                    <option selected="selected"></option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td-title" style="width: 40%; "><i class="biTian">*</i>实际回款日期</td>
            <td class="td-value" style="width:60%;">
                <input  type="text" v-model="returnMoney.actualReturnDate"
                       @focus="showDatePicker($event,item)"/>
            </td>
        </tr> <tr>
        <td class="td-title" style="width: 40%; "><i class="biTian">*</i>回款备注</td>
        <td class="td-value" style="width:60%;">
            <v-edit-div v-model='returnMoney.returnRemark'   placeholder=""></v-edit-div>
        </td>
    </tr>

    </table>
    <!-- <input type="button" value="确定驳回" @click="copierReturn" class="btn btn-primary btn-xs"/>-->
    <input type="button" value="确定" @click="save" class="btn btn-primary btn-xs" style="margin-top: 20px;"/>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
    Vue.component('v-edit-div', {
        props:{
            value: {
                type: String,
                default: ''
            }
        },
        data: function () {
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            value: function () {
                console.log()
                if (!this.isLocked &&!this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        methods:{
            changeText: function (){
                this.$emit('input', (this.$el.innerHTML).replace(/<[^>]+>/g,""));
            }
        },
        template: '<div class="vEdit"  contenteditable="plaintext-only"   v-html="innerText"   @focus="isLocked = true" @blur="isLocked = false" @input="changeText"></div>'
    });
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            reason: '',
            id:  '',
            returnMoney:{},
            type: '其他原因',
        },
        methods: {
            showDatePicker: function (e, item) {
                WdatePicker({
                    onpicked: function (dp) {
                        item.actualReturnDate = dp.cal.getNewDateStr();
                        return true;
                    }
                });
                $(e.target).blur();
            },
            save:function () {
                if (this.returnMoney.actualReturnDate == "") {
                    alert("请填写实际回款日期");
                    return;
                }
                if (this.returnMoney.actualReturnMoney == "") {
                    alert("请填写回款金额");
                    return;
                }
                if (this.returnMoney.haveReturnClear == "") {
                    alert("请选择是否结清");
                    return;
                }
                if (this.returnMoney.returnPayee == "") {
                    alert("请填写收款人");
                    return;
                }
                $.wyui.postMethod(urlConfig.apply.money.saveRefund,trimRN(this.returnMoney), function (data) {
                    alert("操作成功");
//                    parent.refresh();
                    var $iframe = top.findIframeByName("用款申请");
                    $iframe[0].contentWindow.refresh();
                    api.close();
                });
            }
        }
    });
    $(function () {
        $("#txtParent").autoComplete({
            url: server.ip + "/weekPlan/getNameAndTel.json",
            render: function (r, panel) {
                for (var i = 0; i < r.length; i++) {
                    $("<li></li>").data("autoComplete",
                        r[i]).html("<a>" + r[i].customerName + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + r[i].customerTel + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (r) {
                console.log(r);
                app.business.main.customerId = r.customerId;
                app.business.main.customerName = r.customerName;
                app.business.main.customerTel = r.customerTel;
                app.business.main.customerCredit = r.customerCredit;
                app.business.main.competitorCondition = r.competitorCondition;
                app.business.main.existingDevice = r.existingDevice;
                return false;
            },
            extraParams: {createUserId: getCurrentUser().id},
            height: 210,
            width: 300
        });
    });
</script>
<script>
    $('[contenteditable]').each(function() {
        // 干掉IE http之类地址自动加链接
        try {
            document.execCommand("AutoUrlDetect", false, false);
        } catch (e) {}

        $(this).on('paste', function(e) {
            e.preventDefault();
            var text = null;

            if(window.clipboardData && clipboardData.setData) {
                // IE
                text = window.clipboardData.getData('text');
            } else {
                text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
            }
            if (document.body.createTextRange) {
                if (document.selection) {
                    textRange = document.selection.createRange();
                } else if (window.getSelection) {
                    sel = window.getSelection();
                    var range = sel.getRangeAt(0);

                    // 创建临时元素，使得TextRange可以移动到正确的位置
                    var tempEl = document.createElement("span");
                    tempEl.innerHTML = "&#FEFF;";
                    range.deleteContents();
                    range.insertNode(tempEl);
                    textRange = document.body.createTextRange();
                    textRange.moveToElementText(tempEl);
                    tempEl.parentNode.removeChild(tempEl);
                }
                textRange.text = text;
                textRange.collapse(false);
                textRange.select();
            } else {
                // Chrome之类浏览器
                document.execCommand("insertText", false, text);
            }
        });
        // 去除Crtl+b/Ctrl+i/Ctrl+u等快捷键
        $(this).on('keydown', function(e) {
            // e.metaKey for mac
            if (e.ctrlKey || e.metaKey) {
                switch(e.keyCode){
                    case 66: //ctrl+B or ctrl+b
                    case 98:
                    case 73: //ctrl+I or ctrl+i
                    case 105:
                    case 85: //ctrl+U or ctrl+u
                    case 117: {
                        e.preventDefault();
                        break;
                    }
                }
            }
        });
    });
</script>
</body>
</html>